@extends('admin.common.app')
@section('css')
    <link rel="stylesheet" href="/admin/webuploader-0.1.5/webuploader.css">
@endsection
@section('cont')
<section class="Hui-article-box" style="">
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 文章管理
        <span class="c-gray en">&gt;</span> 添加文章
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        {{-- 表单验证提示 --}}
        @include('admin.common.msg')

        <form action="{{ route('admin.article.store') }}" method="post" class="form form-horizontal">
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">分类：</label>
                <div class="formControls col-xs-8 col-sm-9">
                        <span class="select-box">
				            <select class="select" name="classifies_id" size="1" >
                                @foreach($classify as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                @endforeach
				            </select>
                        </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章标题：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="title">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章描述：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="desn">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章封面：</label>
                <div class="formControls col-xs-4 col-sm-5">
                    <!-- 表单提交时的封面地址 -->
                    <input type="hidden" name="pic" id="pic" value="{{ config('web.article.pic') }}">
                    <div id="picker">上传文章封面</div>
                </div>
                <div class="formControls col-xs-4 col-sm-4">
                    <img src="" id="img" style="width: 100px;">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章内容：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea name="body" id="body" cols="30" rows="10"></textarea>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="添加文章">
                </div>
            </div>
        </form>
    </article>
</section>
@endsection
@section('js')
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <!-- webuploader上传js -->
    <script type="text/javascript" src="/admin/webuploader-0.1.5/webuploader.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/admin/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/admin/ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script>

        // 富文本编辑器
        var ue = UE.getEditor('body', {
            initialFrameHeight: 200,
            toolbars:[[
                'fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertframe', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'print', 'preview', 'searchreplace', 'drafts', 'help'
            ]]
        });

        // 初始化Web Uploader
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传
            auto: true,
            // swf文件路径
            swf: '/admin/webuploader/Uploader.swf',
            // 文件接收服务端 上传PHP的代码
            server: '{{ route('admin.article.upfile') }}',
            // 文件上传是携带参数
            formData: {
                _token: '{{csrf_token()}}'
            },
            // 文件上传是的表单名称
            fileVal: 'file',
            // 选择文件的按钮
            pick: {
                id: '#picker',
                // 是否开启选择多个文件的能力
                multiple: false
            },
            // 压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: true
        });
        // 上传成功时的回调方法
        uploader.on('uploadSuccess', function (file, ret) {
            // 图片路径
            let src = ret.url;
            // 给表单添加value值
            $('#pic').val(src);
            // 给图片添加src
            $('#img').attr('src',src);

        });

    </script>
    <script type="text/javascript">
        $(function(){
            $('.skin-minimal input').iCheck({
                checkboxClass: 'icheckbox-blue',
                radioClass: 'iradio-blue',
                increaseArea: '20%'
            });

            $("#form-admin-add").validate({
                rules:{
                    phone:{
                        required:true,
                        phone:true
                    },
                    email:{
                        required:true,
                        email:true,
                    },
                    username:{
                        required:true,
                        minlength:4,
                        maxlength:16
                    },
                    truename:{
                        required:true,
                        isChinese:true
                    },
                    password:{
                        required:true,
                    },
                    password_confirmation:{
                        required:true,
                        equalTo: "#password"
                    },
                },
                message:{
                    username:{
                        required:'用户名不能为空',
                        minlength:'用户名长度必须大于4位',
                        maxlength:'用户名不能超过16位'
                    },
                    truename:{
                        required:'姓名不能为空',
                    },
                    password:{
                        required:'初始密码不能为空',
                    },
                    password_confirmation:{
                        required:'确认密码不能为空',
                        equalTo: '两次密码不一样'
                    },
                    phone:{
                        required:'手机号不能为空',
                    },
                    email:{
                        required:'邮箱不能为空',
                        email:'你输入的不是邮箱',
                    },
                },
                onkeyup:false,
                success:"valid",
                submitHandler: function (form) {
                    // 表单提交
                    form.submit();
                }
            });
            // 自定义验证规则
            // 邮政编码验证
            jQuery.validator.addMethod("phone", function (value, element) {
            //    var reg1 = /^\+86-1[3-9]\d{9}$/;
                var reg2 = /^1[3-9]\d{9}$/;
                var ret = reg1.test(value);
                return this.optional(element) || ret;
            }, "请输入正确的手机号码");
        });
    </script>

@endsection
